/**
 * @desc 写一个增删改查的页面
 * 目标
 * 第一个使用mock去做数据模拟
 * 第二个全程使用hook 以及usecallback usememo等尽量用上
 * 第三个用antd最新的context的那种方法去做数据的点击编辑功能
 * 第四个看看能不能尽量用一下 virtualist 去做列表的优化
 * 第五个 增删改查页面用上forwardref 去做复杂表单的内容
 * 第六个每个小的功能点做完都去git一下 学一下版本控制
 * 第七个针对高性能JavaScript 的东西去做一下性能调优
 */

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Table, Popconfirm } from 'antd';

const ShowTable = () => {
  const EditableContext = React.createContext();
  const [list, setList] = useState([]);
  useEffect(() => {
    axios
      .get('/api/tags')
      .then(function(response) {
        console.log(response, 'response');
        setList(response.data.list || []);
      })
      .catch(function(error) {
        console.log(error);
      });
  });

  const columns = [
    {
      title: '城市名',
      dataIndex: 'name',
      editable: true,
    },
    {
      title: '数值',
      dataIndex: 'value',
      editable: true,
    },
    {
      title: '类型',
      dataIndex: 'type',
      editable: true,
    },
  ];

  return (
    <Table
      bordered
      dataSource={list}
      columns={columns}
      rowClassName="editable-row"
    />
  );
};
export default ShowTable;
